<extend name="Public:base" />
<block name="meta"></block>
<block name="styles">
	<style type="text/css">
		#touchs{
		margin: 10px;width: 100px;height: auto;min-height: 100px;
		border:1px solid #c2ddb6;border-radius: 2px;background: #c2ddb6;
		}
		#touchs li {list-style: none;}
		.clear{
		margin-left: 10px;display:inline-block;height: 24px;width: 40px;color:#fff;
		font-size: 14px;line-height: 24px;background: #c2ddb6;text-align: center;
		}
	</style>
</block>
<block name="body">

<div id="touch_test">
  <span class="clear">clear</span>
  <ul id="touchs">
  </ul>
</div>
	
</block>
<block name="scripts">
	<script type="text/javascript">
	 
	(function($){
	  $('#touchs').find('li').remove();

	  $('#touchs').bind("touchstart",function(event){
	    var touchpros =event.touches[0];
	    console.log(touchpros);
	    $('#touchs').append('<li>touchstart...</li>');
	  });

	  $('#touchs').bind("touchmove",function(){
	    $('#touchs').append('<li>touchmove...</li>');
	  });

	  $('#touchs').bind("touchend",function(){
	    $('#touchs').append('<li>touchend...</li>');
	  });

	  $('#touchs').bind("touchcancel",function(){
	    $('#touchs').append('<li>touchcancel...</li>');
	  });

	  $('.clear').bind("click",function(){
	    $('#touchs').find('li').remove();
	  });
	  
	})(Zepto); 
	</script>
</block>